$(function () {
  /**
   * 利用index.js的封装方法请求的数据进行调用渲染
   */
  window.parent.getArtiPubList(initArtRegList)

  /**
   * 单击添加类别
   */
  let indexAdd = 0
  $('#addBtn').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      title: '添加文章类别',
      area: ['500px', '260px'],
      content: `
          <form id="addForm" class="layui-form" action="">
            <!-- 分类名称 -->
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <!-- 分类别名 -->
            <div class="layui-form-item">
              <label class="layui-form-label">分类别名</label>
              <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <!-- 按钮 -->
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
      `
    });
  })

  /**
   * 提交
   */
  $('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    axios({
      url: '/my/article/addcates',
      method: 'POST',
      data: $(this).serialize()
    }).then(({ data: res }) => {
      //成功回调
      if (res.status != 0) {
        return layui.layer.msg(res.message)
      }
      layui.layer.msg(res.message)
      initArtRegList()
      layui.layer.close(indexAdd)
    }).catch(() => {
      layui.layer.msg('页面出错，请联系管理员')
    })
  })

  /**
   * 修改
   */
  let indexEdit = 0
  $('tbody').on('click', '.btn-edit', function () {
    indexEdit = layer.open({
      type: 1,
      title: '修改文章类别',
      area: ['500px', '260px'],
      content: `
            <form lay-filter="editForm" id="editForm" class="layui-form" action="">
              <!-- 设置隐藏域 -->
              <input type="hidden" name="Id">
              <!-- 分类名称 -->
              <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                    class="layui-input">
                </div>
              </div>
              <!-- 分类别名 -->
              <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                    class="layui-input">
                </div>
              </div>
              <!-- 按钮 -->
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button id="btn-modify" class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
                </div>
              </div>
            </form>
        `
    });
    // 
    let id = $(this).attr('data-id')
    axios({
      url: '/my/article/cates/' + id,
    }).then(({ data: res }) => {
      //成功回调
      if (res.status != 0) {
        return layui.layer.msg(res.message)
      }
      layui.form.val('editForm', res.data)
    }).catch(() => {
      layui.layer.msg('页面出错，请联系管理员')
    })
  })

  /**
   * 确认修改
   */
  $('body').on('click', '#btn-modify', function (e) {
    e.preventDefault()
    axios({
      url: '/my/article/updatecate',
      method: 'POST',
      data: $('#editForm').serialize(),
    }).then(({ data: res }) => {
      //成功回调
      if (res.status != 0) {
        return layui.layer.msg(res.message)
      }
      layui.layer.msg('恭喜您，修改文章成功')
      initArtRegList()
      layui.layer.close(indexEdit)
    }).catch(() => {
      layui.layer.msg('页面出错，请联系管理员')
    })
  })

  /**
   * 删除
   */
  $('body').on('click', '.del', function () {
    axios({
      url: '/my/article/deletecate/' + $(this).attr('data-id')
    }).then(({ data: res }) => {
      //成功回调
      if (res.status != 0) {
        return layui.layer.msg(res.message)
      }
      layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
        //do something
        layui.layer.msg('恭喜您，删除文章成功！')
        initArtRegList()
        layer.close(index);
      })
    }).catch(() => {
      layui.layer.msg('页面出错，请联系管理员')
    })
  })
})


/**
 * 获取数据
 */
function initArtRegList(res) {
  let arr = []
  res.data.forEach(ele => {
    if (ele.Id < 0) return
    arr.push(`
        <tr>
          <td> ${ele.Id} </td>
          <td> ${ele.name} </td>
          <td> ${ele.alias} </td>
          <td>
            <button data-id="${ele.Id}" class="btn-edit  layui-btn layui-btn-xs">编辑</button>
            <button data-id="${ele.Id}" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr>
    `)
  })
  $('tbody').empty().html(arr.join(''))
}